import { Component, Emit, Prop, Watch } from 'vue-facing-decorator'
import Render from '@/render/Render'
import toNative from '@/utils/toNative'
import { downloadFile } from '@/utils/util'
import IconDefault from '@/assets/customer/icon-default.png'
import type { CompanyDetailDto, CompanyInfoDto, CompanyProductInfoDto } from '@/api/company/types'
import { exportCompanyInfo, getCompanyProductInfo } from '@/api/company'
import { Button, Col, Image, message, Row, Tag, Tooltip } from 'ant-design-vue'
import { CaretDownOutlined, RightOutlined } from '@ant-design/icons-vue'
import DialogManageProduct from './DialogManageProduct'
import PaywageDrawerDetail from '../paywage/DrawerDetail'
import EleSignDrawerDetail from '../elesign/DrawerDetail'
import DailyDrawerDetail from '../insurance-daily/DrawerDetail'
import DrawerGroupDetail from '../insurance-group/DrawerDetail'

import { CompanyAuditStatusCnEnum, InsureGroupStatusCnEnum } from '@/const/enum'
import { CompanyAuditStatusColorMap } from '@/const/colorMap'
import useUserStore from '@/stores/user'

interface BasicInfoDto {
    [key: string]: BasicInfoItemDto
}
interface BasicInfoItemDto {
    label: string
    value: string | number | null | undefined
    prefix?: string
    suffix?: string
    prop: string
    event?: () => void
}

type showDetailProp =
    | 'showPaywageDetail'
    | 'showEleSignDetail'
    | 'showDailyDetail'
    | 'showGroupDetail'

@Component
export class BasicInfoView extends Render {
    @Prop() companyId!: number
    @Prop() companyProductInfo!: CompanyProductInfoDto

    showManageProduct = false
    showAccount = false
    showEdit = false
    showPaywageDetail = false
    showEleSignDetail = false
    showDailyDetail = false
    showGroupDetail = false

    basicInfo = {
        paySurplusDays: {
            label: '发薪剩余',
            value: '',
            prefix: '',
            suffix: '天',
            prop: 'isOpenPaySalary',
            event: () => {
                this.onShowDetail('showPaywageDetail', 'isOpenPaySalary')
            }
        },
        periodBalance: {
            label: '长期保',
            value: '',
            prefix: '￥',
            suffix: '',
            prop: 'isOpenPeriod',
            event: () => {
                this.onShowDetail('showPaywageDetail', 'isOpenPeriod')
            }
        },
        wesureBalance: {
            label: '日日保',
            value: '',
            prefix: '￥',
            suffix: '',
            prop: 'isOpenWesure',
            event: () => {
                this.onShowDetail('showDailyDetail', 'isOpenWesure')
            }
        },
        groupBalance: {
            label: '团意保',
            value: '',
            prefix: '￥',
            suffix: '',
            prop: 'isOpenGroup',
            event: () => {
                this.onShowDetail('showGroupDetail', 'isOpenGroup')
            }
        },
        eleSurplusAmount: {
            label: '电子签',
            value: '',
            prefix: '',
            suffix: '份',
            prop: 'isOpenEleSign',
            event: () => {
                this.onShowDetail('showEleSignDetail', 'isOpenEleSign')
            }
        }
    } as BasicInfoDto

    @Watch('companyProductInfo', { deep: true })
    handleWatchCompanyBasicInfo() {
        for (const key in this.basicInfo) {
            this.basicInfo[key].value = this.companyProductInfo[
                key as keyof typeof this.companyProductInfo
            ] as number
        }
    }

    @Emit('refresh')
    handleRefresh() {}

    onShowCheckInfo() {
        this.showManageProduct = true
    }

    onShowSetting() {
        this.showAccount = true
    }

    onShowEdit() {
        this.showEdit = true
    }

    async onExport() {
        const res = await exportCompanyInfo({
            id: this.companyId
        })
        downloadFile(res)
        message.success('导出成功')
    }

    onToNext(path: string) {
        this.$router.push({
            path,
            query: {
                companyId: this.companyId
            }
        })
    }

    onShowManageProduct() {
        this.showManageProduct = true
    }

    onShowDetail(prop: showDetailProp, status: string) {
        if (!this.companyProductInfo[status as keyof typeof this.companyProductInfo]) {
            message.error('产品暂未开通')
            return
        }
        this[prop] = true
    }

    renderItem(name: string, content: string | null | undefined) {
        return (
            <div>
                <div class="text-sm text-black-300 mb-10px">{name}</div>
                <div>{content ?? '--'}</div>
            </div>
        )
    }

    render() {
        return (
            <>
                <div class="pt-20px px-24px rounded-sm">
                    <div class="flex items-center w-full">
                        <Image width={60} height={60} src={IconDefault}></Image>
                        <div class="ml-16px flex-1">
                            <div class="flex items-center justify-between">
                                <div class="flex items-center">
                                    <div class="text-18px font-bold mr-16px">
                                        {this.companyProductInfo.companyName}
                                    </div>
                                    <Tag
                                        color={
                                            CompanyAuditStatusColorMap[
                                                this.companyProductInfo
                                                    .auditStatus as keyof typeof CompanyAuditStatusColorMap
                                            ]
                                        }
                                    >
                                        {
                                            CompanyAuditStatusCnEnum[
                                                this.companyProductInfo.auditStatus
                                            ]
                                        }
                                    </Tag>
                                </div>
                                <div class="flex items-center">
                                    <Tooltip
                                        placement="bottom"
                                        v-slots={{
                                            default: () => {
                                                return (
                                                    <div class="flex px-5px py-1px rounded-sm border border-solid border-border-color-100 items-center text-black-300 cursor-pointer">
                                                        <span class="mr-5px">更多设置</span>
                                                        <CaretDownOutlined />
                                                    </div>
                                                )
                                            },
                                            title: () => {
                                                return (
                                                    <div class="leading-loose p-5px text-center">
                                                        {useUserStore().hasPermission(
                                                            'client:clientDetail:openProduct'
                                                        ) && (
                                                            <div
                                                                class="cursor-pointer"
                                                                onClick={() =>
                                                                    this.onToNext(
                                                                        '/customer/open-products'
                                                                    )
                                                                }
                                                            >
                                                                开通产品
                                                            </div>
                                                        )}
                                                        {useUserStore().hasPermission(
                                                            'client:clientDetail:recharge'
                                                        ) && (
                                                            <div
                                                                class="cursor-pointer"
                                                                onClick={() =>
                                                                    this.onToNext(
                                                                        '/customer/recharge'
                                                                    )
                                                                }
                                                            >
                                                                充值账户
                                                            </div>
                                                        )}
                                                        {useUserStore().hasPermission(
                                                            'client:clientDetail:editBasicInfo'
                                                        ) && (
                                                            <div
                                                                class="cursor-pointer"
                                                                onClick={() =>
                                                                    this.onToNext(
                                                                        '/customer/edit-basic-info'
                                                                    )
                                                                }
                                                            >
                                                                编辑资料
                                                            </div>
                                                        )}
                                                        {useUserStore().hasPermission(
                                                            'client:clientDetail:productManagement'
                                                        ) && (
                                                            <div
                                                                class="cursor-pointer"
                                                                onClick={this.onShowManageProduct}
                                                            >
                                                                产品管理
                                                            </div>
                                                        )}
                                                        {useUserStore().hasPermission(
                                                            'client:clientDetail:forbiddenAccount'
                                                        ) && (
                                                            <div class="cursor-pointer">
                                                                禁用账户
                                                            </div>
                                                        )}
                                                        {useUserStore().hasPermission(
                                                            'client:clientDetail:export'
                                                        ) && (
                                                            <div
                                                                class="cursor-pointer"
                                                                onClick={this.onExport}
                                                            >
                                                                导出
                                                            </div>
                                                        )}
                                                    </div>
                                                )
                                            }
                                        }}
                                    ></Tooltip>
                                    <Button
                                        class="ml-12px"
                                        type="primary"
                                        size="small"
                                        onClick={() => this.$router.go(-1)}
                                    >
                                        返回
                                    </Button>
                                </div>
                            </div>
                            <div class="text-base text-black-300 mt-8px">
                                {this.companyProductInfo.customerNo}
                            </div>
                        </div>
                    </div>
                    <div class="mt-20px pt-20px border-t-1 border-t-solid border-t-border-color-100">
                        <Row>
                            {Object.values(this.basicInfo).map((i) => {
                                return (
                                    <Col sm={24} md={4}>
                                        <div onClick={i?.event}>
                                            <div class="flex text-black-300">
                                                <span>{i.label}</span>
                                                <RightOutlined />
                                            </div>
                                            <div class="text-black-100 font-bold text-xl mt-12px flex ">
                                                {this.companyProductInfo[
                                                    i.prop as keyof typeof this.companyProductInfo
                                                ] ? (
                                                        <div>
                                                            {i.prefix}
                                                            {i.value ?? 0}
                                                            {i.suffix}
                                                        </div>
                                                    ) : (
                                                        '未开通'
                                                    )}
                                                {i.prop === 'isOpenGroup' && (
                                                    <div class="ml-5px -mt-2px">
                                                        <Tag color={`${this.companyProductInfo.isOpenGroup === InsureGroupStatusCnEnum.停用 ? 'error' : 'processing'}`}>
                                                            {
                                                                InsureGroupStatusCnEnum[
                                                                    this.companyProductInfo.isOpenGroup
                                                                ]
                                                            }
                                                        </Tag>
                                                    </div>
                                                )}
                                            </div>
                                        </div>
                                    </Col>
                                )
                            })}
                        </Row>
                    </div>
                </div>

                {
                    <DialogManageProduct
                        v-model:show={this.showManageProduct}
                        companyId={this.companyId}
                        onRefresh={this.handleRefresh}
                    />
                }
                {
                    <PaywageDrawerDetail
                        v-model:show={this.showPaywageDetail}
                        companyId={this.companyId}
                        companyProductInfo={this.companyProductInfo}
                    />
                }
                {
                    <EleSignDrawerDetail
                        v-model:show={this.showEleSignDetail}
                        companyId={this.companyId}
                        companyProductInfo={this.companyProductInfo}
                    />
                }
                {
                    <DailyDrawerDetail
                        v-model:show={this.showDailyDetail}
                        companyId={this.companyId}
                        companyProductInfo={this.companyProductInfo}
                    />
                }
                {
                    <DrawerGroupDetail
                        v-model:show={this.showGroupDetail}
                        companyId={this.companyId}
                        companyProductInfo={this.companyProductInfo}
                    />
                }

                {/* {
                    <DialogSetAccount
                        v-model:show={this.showAccount}
                        basicInfo={this.companyProductInfo}
                        onRefresh={this.handleRefresh}
                    />
                } */}
                {/* {
                    <DialogEditBasicInfo
                        v-model:show={this.showEdit}
                        basicInfo={this.companyProductInfo}
                        onRefresh={this.handleRefresh}
                    />
                } */}
            </>
        )
    }
}

export default toNative<
    { companyId: number; companyProductInfo: CompanyProductInfoDto },
    {
        refresh: () => void
            }
            >(BasicInfoView)
